<!DOCTYPE html>
<html lang='en'>

<head>
    <meta charset='UTF-8'>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.13.0/css/all.css">
    <link href="https://fonts.googleapis.com/css2?family=Arimo&family=Bebas+Neue&family=Inconsolata&display=swap"
        rel="stylesheet">
    <title>Redeye Record</title>
    <link rel="stylesheet" href="redeye.css">
    <script src="redeye.js"></script>
</head>

<body>

    <header>
        <!-- the first block of the website -->
        <section id='titles'>
            <h2><a href='index.html'>REDEYE</a></h2>
            <h3>DANCE MUSIC SPECIALISTS SINCE 1992
                <span id='hamburger' onclick="showHide('menu')">
                    <a href="javascript:void(0);"><i class="fa fa-bars"></i></a>
                </span>
            </h3>
        </section>

        <nav id='menu'>
            <ul>
                <li><a href='contact.html'>CONTACT</a></li>
                <li><a href='support.html'>SUPPORT</a></li>
                <li><a href='aboutus.html'>ABOUT US</a></li>
                <li><a href=''>MY ACCOUNT</a></li>
                <li><a href=''><i class='fa fa-search'></i></a></li>
                <li><a href='cart.html'><i class="fas fa-shopping-cart"></i></a></li>
            </ul>
        </nav>
    </header>

    <main>
        <!-- The navigation bar -->
        <section class="navigation-wrap" >
            <ul class='navigation'>
                <li><a href="">All</a></li>
                <li><a href="">Genre<i class="fas fa-caret-down"></i></a></li>
                <li><a href="">New Release<i class="fas fa-caret-down"></i></a></li>
                <li><a href="">Sale<i class="fas fa-caret-down"></i></a></li>
                <li class='last-item'><a href="">Pre-orders<i class="fas fa-caret-down"></i></a></li>
            </ul>
        </section>

        <!-- breadcrumb -->
        <ul class="breadcrumb">
            <li><a href="cart.html">Cart</a></li>
            <li>Checkout</li>
        </ul>

        <!-- heading   -->
        <h5 class="text-center">CHECKOUT</h5>
        <div class="container m">
             <div class=" flex-box p1 " style="background-color: #C4CDC1;">
                 <div class="flex align-items-center" style="color: #0069FF;"> 
                     <i class="fas fa-shopping-cart"></i>
                     <p class="mx1"> Show Order Summary </p>
                     <i class="fas fa-caret-down"></i>
                 </div>
                <span>$302.00</span>
             </div>
        </div>
        <div class='container flex-box flex-wrap checkout-info'>
            <div class='checkout-information flex-100'>
                <div class='large-container'>
                    <section class='form'>
                        <div class='form-title'>Contact Information</div>
                        <div class='form-container'>
                            <form action='' id='contact-form'>
                                <label class='contact-input'>Email Address:</label>
                                <input type='text' class='form-input' placeholder='Email Address'>
                                <br>
                                <label class='contact-input'>Phone:</label>
                                <input type='text' class='form-input' placeholder='Phone(optional)'>
                                <br>
                                <input id="agree" type="checkbox">
                                <label for="agree">Keep me up to date on news and exclusive offer.</label>
                            </form>
                        </div>
                        <div class='form-title'>Shipping Information</div>
                        <div class='form-container'>
                            <form action='' id='shipping-form'></form>
                            <div class='flex-box'>
                                <section class='hafie'>
                                    <label class='contact-input'>Given Name:</label>
                                    <br>
                                    <input type='text' class='form-input-half' placeholder='Given Name'>
                                </section>
                                <section class='hafie'>
                                    <label class='contact-input'>Family Name:</label>
                                    <br>
                                    <input type='text' class='form-input-half' placeholder='Family Name'>
                                </section>
                            </div>
                            <label class='contact-input'>Address:</label>
                            <input type='text' class='form-input' placeholder='Address'>
                            <br>
                            <label class='contact-input'>Apartment/Suite:</label>
                            <input type='text' class='form-input' placeholder='Apartment, suite, etc. (optional)'>
                            <div class='flex-box'>
                                <section class='hafie'>
                                    <label class='contact-input'>City:</label>
                                    <br>
                                    <input type='text' class='form-input-half' placeholder='City'>
                                </section>
                                <section class='hafie'>
                                    <label class='contact-input'>Postcode:</label>
                                    <br>
                                    <input type='text' class='form-input-half' placeholder='Postcode'>
                                </section>
                            </div>
                            <div class='flex-box'>
                                <section class='hafie'>
                                    <label class='contact-input'>Country:</label>
                                    <br>
                                    <select id="country_dl" class="form-input-half" size="1" onchange="change_country()">
                                        <option value="" selected="selected"> Select Country</option>
                                     </select>
                                </section>
                                <section class='hafie'>
                                    <label class='contact-input'>State/Province:</label>
                                    <br>
                                    <select id="state_dl" class="form-input-half" size="1" onchange="change_state()">
                                        <option value="" selected="selected"> Select State </option>
                                     </select>
                                </section>
                            </div>
                            <a href="cart.html" style="color: #0069FF;"> &lt; Return to Cart </a>
                    </section>
                </div>
            </div>
            <section class='checkout-order pc'>
                <h3>SUMMARY</h3>
                <h4 class="text-center">4 Items in Cart</h4>
                <ul >
                    <li class='flex p1'>
                        <img src='images/26.jpg' class="product">
                        <div class='info flex-1 mx1'>
                            <h5>SHALL NOT FADE</h5>
                            <p class="artist">Djoko</p>
                            <div class="flex-box">
                                <h6>1*</h6>
                                <h6>$26.00</h6>
                            </div>
                        </div>
                    </li>
                    <li class='flex p1'>
                        <img src='images/6.jpg' class="product">
                        <div class='info flex-1 mx1'>
                            <h5>MUKATSUKU</h5>
                            <p class="artist">Pat Thomas</p>
                            <div class="flex-box">
                                <h6>2*</h6>
                                <h6>$92.00</h6>
                            </div>
                        </div>
                    </li>
                    <li class='flex p1'>
                        <img src='images/3.jpg' class="product">
                        <div class='info flex-1 mx1'>
                            <h5>MUKATSUKU</h5>
                            <p class="artist">Pat Thomas</p>
                            <div class="flex-box">
                                <h6>2*</h6>
                                <h6>$92.00</h6>
                            </div>
                        </div>
                    </li>
                </ul>
                <section class="total p1 m1">
                    <div class="flex-box m1">
                        <button class="add-to-cart">Voucher Code</button>
                        <button  class="add-to-cart">Apply</button>
                    </div>
                    <div class="text-right">
                        <h6>Subtotal &nbsp; &nbsp; &nbsp; &nbsp;$302.00</h6>
                        <h6>Shipping &nbsp; &nbsp; &nbsp; &nbsp;$0.00</h6>
                        <h5>TOTAL &nbsp; &nbsp; &nbsp; &nbsp;$302.00</h5>        
                        <p>incl. GST</p>  
                    </div>                   
                </section>

                <section class="pay p1 m1 text-right">
                    <button class="btn-blue">Proceed to Payment</button>
                    <div class='icons'>
                        <span>wirecard</span>
                        <i class="fab fa-cc-visa"></i>
                        <i class="fab fa-paypal"></i>
                        <i class="fab fa-cc-diners-club"></i>
                        <i class="fab fa-cc-paypal"></i>
                        <i class="fab fa-cc-discover"></i>
                    </div>
                </section>


            </section>
            <section class="pay p1 m1 text-right m">
                <button class="btn-blue">Proceed to Payment</button>
                <div class='icons'>
                    <span>wirecard</span>
                    <i class="fab fa-facebook-f"></i>
                    <i class="fab fa-instagram"></i>
                    <i class="fab fa-twitter"></i>
                    <i class="fab fa-pinterest"></i>
                    <i class="fab fa-youtube"></i>
                    <i class="fa fa-envelope"></i>
                </div>
            </section>
        </div>


    </main>


   
    <footer>
        <div class="container flex flex-wrap">
            <section class='words flex-1 flex-100'>
                <address>
                    Redeye Records Ltd., Unit 5,<br>
                    Cristal Business Centre, Knightsdale Rd,<br>
                    Ipswich IP1 4JJ<br>
                </address>
                <br><br>
                <strong>Copyright 2020 Redeye Record. A website by Eq.</strong>
            </section>
            <br>
            <section class='socials flex-1 flex-100'>
                <strong>Stay In Touch<strong>
                     <form action=''>
                         <input class="email" type="text" placeholder="Email Address">
                         <label class="email" for="email"><i class="fas fa-arrow-right"></i></label>
                         <br>
                         <input id="agree" type="checkbox">
                         <label for="agree">I agree to the privacy policy and terms and conditions.</label>
                     </form>
                     <p class='footer_icons'>
                         <i class="fab fa-facebook-f"></i>
                         <i class="fab fa-instagram"></i>
                         <i class="fab fa-twitter"></i>
                         <i class="fab fa-pinterest"></i>
                         <i class="fab fa-youtube"></i>
                         <i class="fa fa-envelope"></i>
                     </p>
            </section>
        </div>
    </footer>
</body>

</html>